<style></style>

<div id="phone_number_list">
    <blockquote class="layui-elem-quote">
       手机号列表页面
    </blockquote>
    
    <!-- 搜索区域 -->
    <div class="layui-form-item" style="margin-bottom: 15px;">
        <div class="layui-input-block">
            <div class="layui-input-inline" style="width: 300px;">
                <input type="text" id="searchKeyword" placeholder="请输入手机号或名称进行搜索" class="layui-input">
            </div>
            <button class="layui-btn" id="searchBtn">搜索</button>
            <button class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
            <button class="layui-btn layui-btn-normal" id="addPhoneBtn">添加手机号</button>
            <button class="layui-btn layui-btn-warm" id="refreshBtn">刷新数据</button>
            <button class="layui-btn layui-btn-danger" id="batchDeleteBtn">批量删除</button>
        </div>
    </div>
    
    <table class="layui-table" lay-data="{height:315}" id="ID-phone-number-table"> </table>
</div>


<!-- 自定义操作模板 -->
<script type="text/html" id="templet-phone-tool">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-sm" lay-event="detail">查看详情</a>
    <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="orders">查看子订单</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>
  </div>
</script>

<!-- 添加/编辑手机号模态框 -->
<div id="phoneModal" style="display: none; padding: 20px;">
    <div class="layui-form">
        <input type="hidden" id="phoneNumberId">
        
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" id="phone" placeholder="请输入手机号" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" placeholder="请输入名称" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">最大接单量</label>
            <div class="layui-input-block">
                <input type="number" id="maxOrders" placeholder="请输入最大接单量" class="layui-input" min="1">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="submitPhoneBtn">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="closePhoneModal()">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    function closePhoneModal() {
        // 关闭模态框
        layer.closeAll();
    }
</script>

<!-- 手机号详情模态框 -->
<div id="phoneDetailModal" style="display: none; padding: 20px;">
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">手机号ID</label>
            <div class="layui-input-block">
                <input type="text" id="detailPhoneNumberId" readonly class="layui-input layui-disabled">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" id="detailPhone" readonly class="layui-input layui-disabled">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" id="detailName" readonly class="layui-input layui-disabled">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-block">
                <input type="text" id="detailCreateTime" readonly class="layui-input layui-disabled">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">更新时间</label>
            <div class="layui-input-block">
                <input type="text" id="detailUpdateTime" readonly class="layui-input layui-disabled">
            </div>
        </div>
        
     
        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary" onclick="closeDetailModal()">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    function closeDetailModal() {
        // 关闭模态框
        layer.closeAll();
    }
</script>

<!-- 子订单查看模态框 -->
<div id="phoneOrdersModal" style="display: none; padding: 20px;">
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">手机号ID</label>
            <div class="layui-input-block">
                <input type="text" id="ordersPhoneNumberId" readonly class="layui-input layui-disabled">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" id="ordersPhone" readonly class="layui-input layui-disabled">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" id="ordersName" readonly class="layui-input layui-disabled">
            </div>
        </div>
        
        <!-- 添加子订单功能模块 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div style="border: 1px solid #e6e6e6; border-radius: 4px; padding: 15px; margin-top: 10px;">
                    <h3 style="margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #333;">添加子订单</h3>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">订单编号</label>
                        <div class="layui-input-block">
                            <input type="text" id="ordersOrderId" placeholder="请输入订单编号" class="layui-input">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea id="ordersRemark" placeholder="请输入备注信息" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="ordersCreateOrderBtn">创建子订单</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 订单状态标签栏 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="layui-tab layui-tab-brief" lay-filter="orderStatusTab">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="all">全部</li>
                        <li lay-id="pending">使用中</li>
                        <li lay-id="completed">已完成</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table class="layui-table" id="ID-all-orders-table"></table>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-table" id="ID-pending-orders-table"></table>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-table" id="ID-completed-orders-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary" onclick="closeOrdersModal()">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    function closeOrdersModal() {
        // 关闭模态框
        layer.closeAll();
    }
</script>

<script>
    layui.use(['table', 'layer'], function () {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        
        // 存储原始手机号数据
        var allPhones = [];
        
        // 渲染表格
        var phoneTable = table.render({
            "elem": "#ID-phone-number-table",
            "title": "手机号列表",
            "cols": [[
                {type: 'checkbox', fixed: 'left'},
                { "field": "phone_number_id", "title": "手机号ID", "width": 200 },
                { "field": "phone", "title": "手机号", "width": 150 },
                { "field": "name", "title": "名称", "width": 150 },
                { "field": "max_orders", "title": "最大接单量", "width": 120, "align": "center", "sort": true },
                { "field": "in_use_count", "title": "使用中", "width": 100, "align": "center", "sort": true },
                { "field": "create_time", "title": "创建时间", "width": 180 },
                { "field": "update_time", "title": "更新时间", "width": 180 },
                { "field": "Action", "title": "操作", "width": 300, "fixed": "right", "align": "center", "toolbar": "#templet-phone-tool" },
            ]],
            "data": [], // 初始为空数据
            "page": true,
            "limit": 10
        });
        
        // 加载手机号数据
        function loadPhoneData() {
            // 显示加载中
            layer.load();
            
            // 调用手机号列表接口
            $.ajax({
                url: '/api/phone/get_phone_number_list/',
                type: 'GET',
                dataType: 'json',
                success: function(res) {
                    if (res.code === 0 && res.data) {
                        // 处理数据，添加使用中数量字段
                        var processedData = res.data.map(function(phone) {
                            var phoneData = {...phone};
                            // 计算使用中数量（只统计status为pending的订单）
                            phoneData.in_use_count = 0;
                            if (phoneData.phone_orders && Array.isArray(phoneData.phone_orders)) {
                                // 只统计status为pending的订单数量
                                phoneData.in_use_count = phoneData.phone_orders.filter(function(order) {
                                    return order.status === 'pending';
                                }).length;
                            }
                            return phoneData;
                        });
                        
                        // 保存原始数据用于搜索
                        allPhones = res.data;
                        
                        // 更新表格数据
                        phoneTable.reload({
                            data: processedData
                        });
                    } else {
                        layer.msg('获取手机号数据失败：' + (res.message || '未知错误'), {icon: 5});
                    }
                },
                error: function(xhr, status, error) {
                    layer.msg('网络错误，无法获取手机号数据', {icon: 5});
                    console.error('获取手机号数据失败：', error);
                },
                complete: function() {
                    // 隐藏加载中
                    layer.closeAll('loading');
                }
            });
        }
        
        // 搜索功能
        function searchPhones(keyword) {
            if (!keyword || keyword.trim() === '') {
                // 没有搜索关键词，显示全部数据
                phoneTable.reload({
                    data: allPhones
                });
                return;
            }
            
            // 执行本地搜索
            var searchResult = allPhones.filter(function(phone) {
                // 搜索手机号
                if (phone.phone && phone.phone.includes(keyword)) {
                    return true;
                }
                
                // 搜索名称
                if (phone.name && phone.name.includes(keyword)) {
                    return true;
                }
                
                return false;
            });
            
            // 更新表格数据
            phoneTable.reload({
                data: searchResult,
                page: {
                    curr: 1 // 重置到第一页
                }
            });
        }
        
        // 初始化时加载数据
        loadPhoneData();
        
        // 搜索按钮点击事件
        $('#searchBtn').on('click', function() {
            var keyword = $('#searchKeyword').val();
            searchPhones(keyword);
        });
        
        // 重置按钮点击事件
        $('#resetBtn').on('click', function() {
            $('#searchKeyword').val('');
            searchPhones('');
        });
        
        // 刷新按钮点击事件
        $('#refreshBtn').on('click', function() {
            // 直接调用加载手机号数据函数
            loadPhoneData();
        });
        
        // 批量删除按钮点击事件
        $('#batchDeleteBtn').on('click', function() {
            batchDeletePhones();
        });
        
        // 回车键触发搜索
        $('#searchKeyword').on('keydown', function(e) {
            if (e.keyCode === 13) {
                var keyword = $(this).val();
                searchPhones(keyword);
            }
        });
        
        // 添加手机号按钮点击事件
        $('#addPhoneBtn').on('click', function() {
            // 重置表单
            $('#phoneNumberId').val('');
            $('#phone').val('');
            $('#name').val('');
            
            // 打开模态框
            layer.open({
                type: 1,
                title: '添加手机号',
                content: $('#phoneModal'),
                area: ['600px', 'auto'],
                success: function() {
                    // 重新渲染表单
                    layui.form.render();
                }
            });
        });
        
        // 提交手机号数据
        $('#submitPhoneBtn').on('click', function() {
            var phoneNumberId = $('#phoneNumberId').val();
            var phone = $('#phone').val();
            var name = $('#name').val();
            
            // 表单验证
            if (!phone) {
                layer.msg('请输入手机号', {icon: 5});
                return;
            }
            
            if (!name) {
                layer.msg('请输入名称', {icon: 5});
                return;
            }
            
            // 显示加载中
            layer.load();
            
            // 获取最大接单量，默认为2
            var maxOrders = $('#maxOrders').val();
            if (!maxOrders || maxOrders < 1) {
                maxOrders = 2;
            }
            
            // 准备请求数据
            var requestData = {
                phone: phone,
                name: name,
                max_orders: parseInt(maxOrders)
            };
            
            // 判断是添加还是编辑
            var url = phoneNumberId ? '/api/phone/update_phone_number/' : '/api/phone/create_phone_number/';
            
            if (phoneNumberId) {
                requestData.phone_number_id = phoneNumberId;
            }
            
            // 调用API
            $.ajax({
                url: url,
                type: 'POST',
                data: requestData,
                dataType: 'json',
                success: function(res) {
                    // 隐藏加载中
                    layer.closeAll('loading');
                    
                    if (res.code === 0) {
                        layer.msg(phoneNumberId ? '手机号更新成功' : '手机号添加成功', {icon: 6});
                        
                        // 关闭模态框
                        closePhoneModal();
                        
                        // 重新加载手机号数据
                        loadPhoneData();
                    } else {
                        layer.msg(phoneNumberId ? '更新手机号失败：' : '添加手机号失败：' + (res.message || '未知错误'), {icon: 5});
                    }
                },
                error: function(xhr, status, error) {
                    // 隐藏加载中
                    layer.closeAll('loading');
                    
                    layer.msg('网络错误，无法' + (phoneNumberId ? '更新' : '添加') + '手机号', {icon: 5});
                    console.error(phoneNumberId ? '更新手机号失败：' : '添加手机号失败：', error);
                }
            });
        });
        
        // 删除手机号函数，支持回调函数用于批量删除
        function deletePhone(phoneNumberId, callback) {
            // 调用删除手机号接口
            $.ajax({
                url: '/api/phone/delete_phone_number/',
                type: 'POST',
                data: {
                    phone_number_id: phoneNumberId
                },
                dataType: 'json',
                success: function(res) {
                    if (callback) {
                        callback(res.code === 0, phoneNumberId, res);
                    } else {
                        // 如果没有回调，保留原有逻辑
                        if (res.code === 0) {
                            console.log('手机号删除成功');
                            // 重新加载手机号数据
                            loadPhoneData();
                        } else {
                            console.error('删除手机号失败：', res.message || '未知错误');
                        }
                    }
                },
                error: function(xhr, status, error) {
                    if (callback) {
                        callback(false, phoneNumberId, {message: '网络错误'});
                    } else {
                        console.error('网络错误，无法删除手机号：', error);
                    }
                }
            });
        }
        
        // 批量删除手机号函数
        function batchDeletePhones() {
            // 获取选中的手机号
            var checkStatus = table.checkStatus('ID-phone-number-table');
            var data = checkStatus.data;
            
            if (data.length === 0) {
                layer.msg('请至少选择一个手机号', {icon: 5});
                return;
            }
            
            // 显示确认删除对话框
            layer.confirm('确定要删除选中的 ' + data.length + ' 个手机号吗？', {
                icon: 3,
                title: '确认批量删除'
            }, function(index) {
                // 关闭确认对话框
                layer.close(index);
                
                // 显示加载中
                var loadingIndex = layer.load(2, {
                    shade: [0.3, '#333']
                });
                
                // 记录成功和失败的数量
                var successCount = 0;
                var failCount = 0;
                var totalCount = data.length;
                
                // 存储失败的手机号信息
                var failPhones = [];
                
                // 逐个删除手机号
                data.forEach(function(phone) {
                    deletePhone(phone.phone_number_id, function(success, phoneNumberId, res) {
                        if (success) {
                            successCount++;
                        } else {
                            failCount++;
                            failPhones.push({
                                id: phoneNumberId,
                                message: res.message || '删除失败'
                            });
                        }
                        
                        // 检查是否全部处理完毕
                        if (successCount + failCount === totalCount) {
                            // 隐藏加载中
                            layer.close(loadingIndex);
                            
                            // 显示删除结果
                            var message = '';
                            if (successCount > 0 && failCount === 0) {
                                message = '批量删除成功，共删除 ' + successCount + ' 个手机号';
                                layer.msg(message, {icon: 6});
                            } else if (successCount > 0 && failCount > 0) {
                                message = '部分删除成功，成功 ' + successCount + ' 个，失败 ' + failCount + ' 个';
                                layer.msg(message, {icon: 6});
                                console.error('批量删除手机号部分失败：', failPhones);
                            } else {
                                message = '批量删除失败';
                                layer.msg(message, {icon: 5});
                                console.error('批量删除手机号全部失败：', failPhones);
                            }
                            
                            // 重新加载手机号数据
                            loadPhoneData();
                        }
                    });
                });
            });
        }
        
        // 监听工具条
        table.on('tool(ID-phone-number-table)', function(obj) {
            var data = obj.data;
            
            if (obj.event === 'detail') {
                // 查看详情
                showPhoneDetail(data);
            } else if (obj.event === 'edit') {
                // 编辑手机号
                editPhone(data);
            } else if (obj.event === 'orders') {
                // 查看子订单
                showPhoneOrders(data);
            } else if (obj.event === 'delete') {
                // 删除手机号
                deletePhoneConfirm(data);
            }
        });
        
        // 显示手机号子订单
        function showPhoneOrders(data) {
            // 设置详情数据
            $('#ordersPhoneNumberId').val(data.phone_number_id || '');
            $('#ordersPhone').val(data.phone || '');
            $('#ordersName').val(data.name || '');
            
            // 重置子订单表单
            $('#ordersOrderId').val('');
            $('#ordersRemark').val('');
            
            // 保存当前手机号ID
            var currentPhoneNumberId = data.phone_number_id;
            
            // 打开模态框
            layer.open({
                type: 1,
                title: '手机号子订单',
                content: $('#phoneOrdersModal'),
                area: ['800px', 'auto'],
                success: function() {
                    // 渲染表单
                    layui.form.render();
                    
                    // 初始化表格
                    renderOrderTables(currentPhoneNumberId);
                    
                    // 绑定创建子订单事件
                    $('#ordersCreateOrderBtn').off('click').on('click', function() {
                        createPhoneOrder(currentPhoneNumberId);
                    });
                    
                    // 监听tab切换
                    layui.element.on('tab(orderStatusTab)', function() {
                        // 重新渲染表格，使用保存的手机号ID
                        renderOrderTables(currentPhoneNumberId);
                    });
                }
            });
        }
        
        // 更新手机号订单
        function updatePhoneOrder(phoneOrderId, status, remark) {
            // 打开更新模态框
            layer.open({
                type: 1,
                title: '更新手机号订单',
                content: '<div style="padding: 20px;"><form class="layui-form">' +
                         '<input type="hidden" id="updatePhoneOrderId" value="' + phoneOrderId + '">' +
                         '<div class="layui-form-item">' +
                         '<label class="layui-form-label">状态</label>' +
                         '<div class="layui-input-block">' +
                         '<select id="updateStatus" class="layui-input">' +
                         '<option value="pending"' + (status === 'pending' ? ' selected' : '') + '>使用中</option>' +
                         '<option value="completed"' + (status === 'completed' ? ' selected' : '') + '>已完成</option>' +
                         '</select>' +
                         '</div>' +
                         '</div>' +
                         '<div class="layui-form-item">' +
                         '<label class="layui-form-label">备注</label>' +
                         '<div class="layui-input-block">' +
                         '<textarea id="updateRemark" class="layui-textarea">' + remark + '</textarea>' +
                         '</div>' +
                         '</div>' +
                         '</form></div>',
                area: ['500px', 'auto'],
                btn: ['确定', '取消'],
                success: function() {
                    layui.form.render();
                },
                yes: function(index) {
                    // 获取更新后的状态和备注
                    var newStatus = $('#updateStatus').val();
                    var newRemark = $('#updateRemark').val().trim();
                    
                    // 表单验证
                    if (!newRemark) {
                        layer.msg('请输入备注信息', {icon: 5});
                        return;
                    }
                    
                    // 显示加载中
                    layer.load();
                    
                    // 准备请求数据
                    var requestData = {
                        phone_order_id: phoneOrderId,
                        status: newStatus,
                        remark: newRemark
                    };
                    
                    // 调用更新手机号订单API
                    $.ajax({
                        url: '/api/phone/update_phone_order/',
                        type: 'POST',
                        data: requestData,
                        dataType: 'json',
                        success: function(res) {
                            // 隐藏加载中
                            layer.closeAll('loading');
                            
                            if (res.code === 0) {
                                layer.msg('手机号订单更新成功', {icon: 6});
                                
                                // 关闭模态框
                                layer.close(index);
                                
                                // 重新渲染订单表格
                                var phoneNumberId = $('#ordersPhoneNumberId').val();
                                renderOrderTables(phoneNumberId);
                            } else {
                                layer.msg('更新手机号订单失败：' + (res.message || '未知错误'), {icon: 5});
                            }
                        },
                        error: function(xhr, status, error) {
                            // 隐藏加载中
                            layer.closeAll('loading');
                            
                            layer.msg('网络错误，无法更新手机号订单', {icon: 5});
                            console.error('更新手机号订单失败：', error);
                        }
                    });
                }
            });
        }
        
        // 渲染子订单表格
        function renderOrderTables(phoneNumberId) {
            // 显示加载中
            layer.load();
            
            // 调用手机号详情接口获取子订单数据
            $.ajax({
                url: '/api/phone/get_phone_number/',
                type: 'GET',
                data: {
                    phone_number_id: phoneNumberId
                },
                dataType: 'json',
                success: function(res) {
                    // 隐藏加载中
                    layer.closeAll('loading');
                    
                    if (res.code === 0 && res.data && res.data.phone_orders) {
                        var allOrders = res.data.phone_orders;
                        
                        // 根据状态筛选订单
                        var pendingOrders = allOrders.filter(function(order) {
                            return order.status === 'pending';
                        });
                        
                        var completedOrders = allOrders.filter(function(order) {
                            return order.status === 'completed';
                        });
                        
                        // 渲染全部订单表格
                        table.render({
                            elem: '#ID-all-orders-table',
                            data: allOrders,
                            cols: [[
                                {field: 'phone_order_id', title: '订单ID', width: 250},
                                {field: 'order_id', title: '订单编号', width: 150},
                                {field: 'status', title: '状态', width: 100, templet: function(d) {
                                    return d.status === 'pending' ? '使用中' : '已完成';
                                }},
                                {field: 'remark', title: '备注', width: 150},
                                {field: 'create_time', title: '创建时间', width: 180},
                                {fixed: 'right', title: '操作', width: 100, templet: function(d) {
                                    return '<button class="layui-btn layui-btn-xs layui-btn-normal update-order-btn" data-order-id="' + d.phone_order_id + '" data-status="' + d.status + '" data-remark="' + (d.remark || '') + '">更新</button>';
                                }}
                            ]],
                            page: false,
                            done: function() {
                                // 为所有更新按钮添加事件委托
                                $('.update-order-btn').off('click').on('click', function() {
                                    var orderId = $(this).data('order-id');
                                    var status = $(this).data('status');
                                    var remark = $(this).data('remark');
                                    updatePhoneOrder(orderId, status, remark);
                                });
                            }
                        });
                        
                        // 渲染使用中订单表格
                        table.render({
                            elem: '#ID-pending-orders-table',
                            data: pendingOrders,
                            cols: [[
                                {field: 'phone_order_id', title: '订单ID', width: 250},
                                {field: 'order_id', title: '订单编号', width: 150},
                                {field: 'status', title: '状态', width: 100, templet: function(d) {
                                    return d.status === 'pending' ? '使用中' : '已完成';
                                }},
                                {field: 'remark', title: '备注', width: 150},
                                {field: 'create_time', title: '创建时间', width: 180},
                                {fixed: 'right', title: '操作', width: 100, templet: function(d) {
                                    return '<button class="layui-btn layui-btn-xs layui-btn-normal update-order-btn" data-order-id="' + d.phone_order_id + '" data-status="' + d.status + '" data-remark="' + (d.remark || '') + '">更新</button>';
                                }}
                            ]],
                            page: false,
                            done: function() {
                                // 为所有更新按钮添加事件委托
                                $('.update-order-btn').off('click').on('click', function() {
                                    var orderId = $(this).data('order-id');
                                    var status = $(this).data('status');
                                    var remark = $(this).data('remark');
                                    updatePhoneOrder(orderId, status, remark);
                                });
                            }
                        });
                        
                        // 渲染已完成订单表格
                        table.render({
                            elem: '#ID-completed-orders-table',
                            data: completedOrders,
                            cols: [[
                                {field: 'phone_order_id', title: '订单ID', width: 250},
                                {field: 'order_id', title: '订单编号', width: 150},
                                {field: 'status', title: '状态', width: 100, templet: function(d) {
                                    return d.status === 'pending' ? '使用中' : '已完成';
                                }},
                                {field: 'remark', title: '备注', width: 150},
                                {field: 'create_time', title: '创建时间', width: 180},
                                {fixed: 'right', title: '操作', width: 100, templet: function(d) {
                                    return '<button class="layui-btn layui-btn-xs layui-btn-normal update-order-btn" data-order-id="' + d.phone_order_id + '" data-status="' + d.status + '" data-remark="' + (d.remark || '') + '">更新</button>';
                                }}
                            ]],
                            page: false,
                            done: function() {
                                // 为所有更新按钮添加事件委托
                                $('.update-order-btn').off('click').on('click', function() {
                                    var orderId = $(this).data('order-id');
                                    var status = $(this).data('status');
                                    var remark = $(this).data('remark');
                                    updatePhoneOrder(orderId, status, remark);
                                });
                            }
                        });
                    } else {
                        layer.msg('获取子订单数据失败：' + (res.message || '未知错误'), {icon: 5});
                    }
                },
                error: function(xhr, status, error) {
                    // 隐藏加载中
                    layer.closeAll('loading');
                    
                    layer.msg('网络错误，无法获取子订单数据', {icon: 5});
                    console.error('获取子订单数据失败：', error);
                }
            });
        }
        
        // 显示手机号详情
        function showPhoneDetail(data) {
            // 设置详情数据
            $('#detailPhoneNumberId').val(data.phone_number_id || '');
            $('#detailPhone').val(data.phone || '');
            $('#detailName').val(data.name || '');
            $('#detailCreateTime').val(data.create_time || '');
            $('#detailUpdateTime').val(data.update_time || '');
            
            // 打开模态框
            layer.open({
                type: 1,
                title: '手机号详情',
                content: $('#phoneDetailModal'),
                area: ['600px', 'auto']
            });
        }
        
        // 创建手机号订单
        function createPhoneOrder(phoneNumberId) {
            var orderId = $('#ordersOrderId').val().trim();
            var remark = $('#ordersRemark').val().trim();
            
            // 表单验证
            if (!orderId) {
                layer.msg('请输入订单编号', {icon: 5});
                return;
            }
            
            if (!remark) {
                layer.msg('请输入备注信息', {icon: 5});
                return;
            }
            
            // 显示加载中
            layer.load();
            
            // 准备请求数据
            var requestData = {
                phone_number_id: phoneNumberId,
                order_id: orderId,
                remark: remark
            };
            
            // 调用创建手机号订单API
            $.ajax({
                url: '/api/phone/create_phone_order/',
                type: 'POST',
                data: requestData,
                dataType: 'json',
                success: function(res) {
                    // 隐藏加载中
                    layer.closeAll('loading');
                    
                    if (res.code === 0) {
                        layer.msg('手机号订单创建成功', {icon: 6});
                        
                        // 重置子订单表单
                        $('#ordersOrderId').val('');
                        $('#ordersRemark').val('');
                        
                        // 重新渲染订单表格
                        renderOrderTables(phoneNumberId);
                        
                        // 显示创建成功的订单信息
                        showOrderCreateSuccess(res.data);
                    } else {
                        layer.msg('创建手机号订单失败：' + (res.message || '未知错误'), {icon: 5});
                    }
                },
                error: function(xhr, status, error) {
                    // 隐藏加载中
                    layer.closeAll('loading');
                    
                    layer.msg('网络错误，无法创建手机号订单', {icon: 5});
                    console.error('创建手机号订单失败：', error);
                }
            });
        }
        
        // 显示订单创建成功信息
        function showOrderCreateSuccess(orderData) {
            // 构建订单信息HTML
            var orderInfoHtml = '';
            orderInfoHtml += '<div style="padding: 15px;">';
            orderInfoHtml += '<p><strong>订单创建成功！</strong></p>';
            orderInfoHtml += '<p>订单编号：' + (orderData.order_id || '-') + '</p>';
            orderInfoHtml += '<p>手机号：' + (orderData.phone || '-') + '</p>';
            orderInfoHtml += '<p>状态：' + (orderData.status || '-') + '</p>';
            orderInfoHtml += '<p>创建时间：' + (orderData.create_time || '-') + '</p>';
            orderInfoHtml += '</div>';
            
            // 显示订单信息弹窗
            layer.open({
                type: 1,
                title: '订单创建成功',
                content: orderInfoHtml,
                area: ['400px', 'auto'],
                btn: ['确定'],
                yes: function(index) {
                    layer.close(index);
                }
            });
        }
        
        // 编辑手机号
        function editPhone(data) {
            // 设置表单数据
            $('#phoneNumberId').val(data.phone_number_id || '');
            $('#phone').val(data.phone || '');
            $('#name').val(data.name || '');
            $('#maxOrders').val(data.max_orders || 2);

            // 打开模态框
            layer.open({
                type: 1,
                title: '编辑手机号',
                content: $('#phoneModal'),
                area: ['600px', 'auto'],
                success: function() {
                    // 重新渲染表单
                    layui.form.render();
                }
            });
        }
        
        // 删除手机号确认
        function deletePhoneConfirm(data) {
            layer.confirm('确定要删除手机号 ' + data.phone + ' 吗？', {
                icon: 3,
                title: '确认删除'
            }, function(index) {
                // 关闭确认对话框
                layer.close(index);
                
                // 显示加载中
                layer.load();
                
                // 调用删除函数
                deletePhone(data.phone_number_id, function(success, phoneNumberId, res) {
                    // 隐藏加载中
                    layer.closeAll('loading');
                    
                    if (success) {
                        layer.msg('手机号删除成功', {icon: 6});
                        // 重新加载数据
                        loadPhoneData();
                    } else {
                        layer.msg('删除手机号失败：' + (res.message || '未知错误'), {icon: 5});
                    }
                });
            });
        }
    });
</script>